<script lang="ts" setup>
import { useDownExcel } from '../useDownExcel';
import { useQuarterHistoryStore } from '@/store/modules/dcp/assessment_indicators/quarter_history';
// 获取月份
const quarterHistoryStore = useQuarterHistoryStore();
const dateList = ref<any[]>([]);
const yearMonth = ref<any[]>([]);
const month = ref<string>('');
function getDateList() {
  yearMonth.value = quarterHistoryStore.quarterList;
  for (let i = 0; i < yearMonth.value.length; i++) {
    dateList.value.push({ header: yearMonth.value[i].yearMonth });
  }
}
onMounted(async () => {
  await quarterHistoryStore.getQuarterList();
  getDateList();
});

// 根据月份获取数据
const activeKey = ref([]);
const key = ref<number>(0);

function onChange(keys: any) {
  key.value = keys;
  const date: any = dateList.value[keys].header;
  month.value = date;
  getData(date);
}

const columns: any = [
  {
    title: '区县网运线季度考核指标',
    children: [
      {
        title: '指标名称',
        dataIndex: 'indicatorName',
        key: 'indicatorName',
        align: 'center',
      },
      {
        title: '分值',
        dataIndex: 'score',
        key: 'score',
        align: 'center',
      },
      {
        title: '县体考核办法',
        dataIndex: 'assessmentMet',
        key: 'assessmentMet',
        align: 'center',
      },
      {
        title: '提供人',
        dataIndex: 'provider',
        key: 'provider',
        align: 'center',
      },
    ],
    align: 'center',
  },
  // {
  //   title: '操作',
  //   dataIndex: 'operation',
  //   key: 'lastColumn',
  //   align: 'center',
  //   fixed: 'right',
  // },
];
const data = ref<any[]>([]);
const loading = ref<boolean>(false);
async function getData(date: any) {
  loading.value = true;
  await getZQuarterListByYearMonth(date).then((res: any) => {
    data.value = res.data;
  });
  loading.value = false;
}

// 跳转
function linkObject(record: any) {
  return { name: 'assessmentIndicatorsQuarterHistoryDetails', query: { assessmentMethod: record.assessmentMet, date: record.yearMonth } };
}
</script>

<template>
  <PubPageMain class="max">
    <div class="header">
      <div class="left">
        <a-space>
          <div class="pjTitle">
            季度-历史记录
          </div>
        </a-space>
      </div>
      <div class="right">
        <a-space>
          <a-button type="primary" @click="$router.push('/assessment_indicators/quarter')">
            返回
          </a-button>
        </a-space>
      </div>
    </div>
    <div class="content">
      <a-collapse v-model:activeKey="activeKey" accordion :bordered="false" class="m-collapse" @change="onChange">
        <a-collapse-panel v-for="(item, index) in dateList" :key="index" :header="item.header">
          <a-table
            :columns="columns" :data-source="data" row-key="id" class="m-table" :loading="loading"
            :pagination="false"
          >
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.dataIndex === 'assessmentMet'">
                <RouterLink :to="linkObject(record)">
                  {{ text }}
                </RouterLink>
              </template>
            </template>
          </a-table>
          <template #extra>
            <a-button v-if="month" type="link" @click="useDownExcel().downQuarterhistoryexcel(month)">
              导出
            </a-button>
          </template>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </PubPageMain>
</template>

<style lang="scss" scoped>
.max {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 95%;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 31px;
    margin-bottom: 10px;

    .pjTitle {
      padding-left: 15px;
      background: url("@/assets/images/title-left-bg.svg") no-repeat;
    }

    .right {
      display: flex;
      align-items: center;
    }
  }

  .content {
    height: 100%;
    overflow: auto;

    .m-collapse {
      max-height: 460px;
      overflow-y: auto;
    }
  }
}

.editable-row-operations a {
  margin-right: 8px;
}
</style>
